<template>
    <div class="content ppp">
        <div>
            <div v-if="error" class="error">
                {{ error }}
            </div>
            <transition name="fade" mode="out-in">
                <div v-if="post" class="content">
                    <h2>{{ post }}</h2>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import MintUI from 'mint-ui'
    Vue.use(MintUI)

    export default {
        data() {
            return {
                loading: false,
                post: null,
                error: null
            }
        },
        created() {
            this.fetchData();
        },
        watch: {
            '$route': 'fetchData'
        },
        methods: {
            fetchData() {
                MintUI.Indicator.open({
                    text: 'Loading...',
                    spinnerType: 'fading-circle'
                });

                this.error = this.post = null;
                setTimeout(() => {
                    MintUI.Indicator.close();
                    this.post = 'Hello Vue!!! id:' + this.$route.params.id;
                }, 250);
            }
        }
    }
</script>

<style lang="scss">
    .test {
        font-size: 12px;
    }

    .p_p {
        background: #000;
    }
</style>